<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | jQuery Image Zoom</title>
<link href="../style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function() {

	var move = -15
	     zoom = 1.1;

	$('.item').hover(function() {
		
		width = $('.item').width() * zoom;
		height = $('.item').height() * zoom;
	
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:300});
		$(this).find('div.caption').stop(false,true).fadeIn(300);
	},
	function() {

		$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:300});	
		$(this).find('div.caption').stop(false,true).fadeOut(400);
	});

});

</script>

<style>
.item {
	width:304px;
	height:271px;
	border:4px solid #333;
	margin:30px 12px 10px 5px;
	overflow:hidden;
	position:relative;
	float:left;
}
.item .caption {
	width:304px;
	height:71px;
	bottom:0;
	color:#fff;
	background:#000;
	font-weight:700;
	position:absolute;
	left:0;
	display:none;
	filter:alpha(opacity=82); 
	-moz-opacity:0.9;
	opacity: 0.9; 
}
.item .caption a {
	text-decoration:none;
	color:#0cc7dd;
	font-size:17px;
	letter-spacing:-1px;
	font-family:Arial, Helvetica, sans-serif;
	padding:5px;
	display:block;
}
.item .caption p {
	padding:5px;
	margin:0;
	color:#fff;
	line-height:15px;
	font-size:12px;
}
.item img {
	border:0;
	position:absolute;
}

</style>
</head>

<body>

<?php include '../includes/header.php';
 $link = '| <a href="http://papermashup.com/jquery-php-ajax-autosuggest/">Back To Tutorial</a>';
?>

    <div class="item"> <img src="http://papermashup.com/wp-content/themes/arthemia/portfolio/images/jennifer.jpg" height="271" width="304" />
      <div class="caption"> <a href="http://jenniferjohnston.tv">Jennifer Johnston</a>
        <p>Scottish voiceover Jennifer Johnston. Branding, site design and development</p>
      </div>
    </div>
    <div class="item"> <img src="http://papermashup.com/wp-content/themes/arthemia/portfolio/images/mimitah.jpg" height="271" width="304" />
      <div class="caption"> <a href="http://mimitah.com">Mimitah Bofando</a>
        <p>African musician Mimitah Bofando. Branding, site design and development</p>
      </div>
    </div>
    <div class="item"> <img src="http://papermashup.com/wp-content/themes/arthemia/portfolio/images/kate.jpg" height="271" width="304" />
      <div class="caption"> <a href="http://katemcintyre.tv">Kate Mcintyre</a>
        <p>TV presenter Kate Mcintyre. Branding, site design and development</p>
      </div>
    </div>
    
    <div class="clear"></div>


<?php include '../includes/footer.php';?>

</body>
</html>